<template>
	<view class="my">
		
		<!-- 头部 -->
		<view class="header">
			
			<image class="bg" src="/static/images/my/header-bg.png" mode="aspectFill"></image>
			<!-- 个人信息 -->
			<view class="info">
				<!-- 用户登录 -->
				<image v-if="isLogin"
					class="avatar"
					:src="loginUser.avatar"
					mode="aspectFill"
				></image>
				<!-- 用户没有登录 -->
				<image v-if="!isLogin"
					class="avatar"
					src="/static/images/my/avatar.png"
					mode="aspectFill"
				></image>
				<view class="detail">
					<u-text v-if="isLogin" :size="16" :text="loginUser.nickname" color="#FFFFFF" block bold></u-text>
					<navigator open-type="navigate" url="/login/login?back=1">
						<u-text v-if="!isLogin" :size="16" text="点击前往登录" color="#FFFFFF" block bold></u-text>
					</navigator>
					<view v-if="isLogin" class="tag">{{loginUser.sign}}</view>
				</view>
			</view>
		</view>
		<!-- 我的返现 -->
		<view class="money">
			<!-- 返现标题 -->
			<view class="title">
				<view class="left">
					<u-text :size="16" text="我的返现" color="#292929"></u-text>
					<u-text :size="13" text="总收入:￥100" color="#FF7A40"></u-text>
				</view>
				<view class="right">
					<u-text :size="14" text="去提现" color="#FFFFFF" @tap="toWithdraw"></u-text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- <cl-text :size="32" value="我的返现" color="#292929" block bold></cl-text> -->
			<view class="msg">
				<view class="item" v-for="(item, index) in backMoney" :key="index">
					<cl-text :size="46" :value="item.num" color="#FF7A40" bold></cl-text>
					<cl-text
						:size="24"
						value="元"
						color="#FF7A40"
						bold
						:margin="[0, 0, 0, 4]"
					></cl-text>
					<cl-text :size="24" :value="item.title" color="#282828" block bold></cl-text>
				</view>
			</view>
		</view>
		<!-- 广告图 -->
		<view class="advice" @tap="toInvite">
			<image src="/static/images/my/advice.png" mode="aspectFill"></image>
		</view>
		
		<!-- 其他服务 -->
				<view class="other">
					<view class="item" @click="toService('1')">
						<image class="mask" src="/static/images/my/member.png" mode="aspectFill"></image>
						<view class="content">
							<u-text :size="14" text="好友订单" color="#373737"></u-text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item" @click="toService('2')">
						<image class="mask" src="/static/images/my/member.png" mode="aspectFill"></image>
						<view class="content">
							<u-text :size="14" text="好友列表" color="#373737"></u-text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item" @click="toService('3')">
						<image class="mask" src="/static/images/my/help.png" mode="aspectFill"></image>
						<view class="content">
							<u-text :size="14" text="帮助中心" color="#373737"></u-text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item" v-if="isLogin" @click="toService('logout')">
						<image class="mask" src="/static/images/my/help.png" mode="aspectFill"></image>
						<view class="content">
							<u-text :size="14" text="退出登录" color="#373737"></u-text>
						</view>
					</view>
				</view>
		
			<u-modal
				:show="isLogout"
				title="提示"
				@cancel="isLogout=false"
				@confirm="handleConfirmLogout"
				showCancelButton
				content='你是否要离开吗？'></u-modal>
			</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			loginUser: null,
			isLogout: false,
			
			backMoney: [{
				num: "0.00",
				title: "总收入",
			},{
				num: "0.00",
				title: "待结算",
			},{
				num: "0.00",
				title: "余额",
			},
			]
		};
	},
	onShow(){
		// 这个是做按键控制的
		this.isLogin = this.$cache.get("isLogin")
		// 这个数据是要给页面渲染的
		this.loginUser = this.$cache.get("user")
		this.$getUserInfo(this.loginUser.id).then(resData=>{
			if(resData.user.forbbiden == 1){
				this.$toast("您已经被管理员禁止了...")
				// 这里肯定是跳转一个页面
				return 
			}
		})
	},
	// 计算属性会出现登录返回之后，页面数据不会进行刷新
	// computed: {
	// 	isLogin: function(){
	// 		return this.$cache.get("isLogin")
	// 	},
	// 	loginUser: function(){
	// 		return this.$cache.get("user")
	// 	}
	// },
	methods: {
		//跳转提现页面
		toWithdraw() {
			// 登录判断，如果登录就去/pages/user/order
			this.$isLogin("/pages/user/order").then(user=>{
				uni.navigateTo({
					url: "/pages/user/order",
				});
			})
		},
		//跳转邀请好友页面
		toInvite() {
			uni.switchTab({
				url: "/pages/index/index",
			});
		},
		//查看订单
		lookOrder(){
			uni.navigateTo({
				url: "/pages/user/order",
			});
		},
		//去其他服务页
		toService(url){
			if(url == "logout"){
				this.handleLogout()
			}else{
				uni.navigateTo({
					url: url,
				});
			}
		},
		// 退出登录
		handleLogout(){
			this.isLogout = true
		},
		// 退出逻辑
		async handleConfirmLogout(){
			const resData = await this.$request.post("/user/logout")
			// 把弹出框关闭
			this.isLogout = false
			// 把缓存清除
			this.$cache.remove("token");
			this.$cache.remove("userId");
			this.$cache.remove("user");
			this.$cache.remove("isLogin");
			// 把当前清空
			this.isLogin = false;
			this.loginUser = {}
		}
	},
	
};
</script>

<style scoped lang="scss">
page {
	background: #f5f5f5;
}
.my {
	padding-bottom: 50rpx;
	.header {
		position: relative;
		height: 508rpx;
		.bg {
			width: 100%;
			height: 100%;
		}
		.info {
			position: absolute;
			display: flex;
			align-items: center;
			left: 0;
			top: 203rpx;
			padding: 0 32rpx;
			.avatar {
				width: 116rpx;
				height: 117rpx;
				border-radius: 50%;
			}
			.detail {
				margin-left: 18rpx;
				.tag {
					margin-top: 18rpx;
					display: inline-block;
					position: relative;
					padding: 6rpx 18rpx;
					color: #ffffff;
					font-size: 28rpx;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 26rpx;
				}
			}
		}
	}
	.money {
		position: relative;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: -120rpx auto 0 auto;
		width: 690rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f5f5f5;
			.right {
				display: flex;
				padding: 4rpx 16rpx 4rpx 20rpx;
				align-items: center;
				background: #80a3ff;
				font-size: 28rpx;
				color: #ffffff;
				border-radius: 25rpx;
			}
		}
		.msg {
			display: flex;
			.item {
				margin-top: 50rpx;
				flex: 1;
				text-align: center;
			}
		}
	}
	.advice {
		margin: 0 auto;
		text-align: center;
		margin-top: 24rpx;
		width: 690rpx;
		height: 180rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.order {
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f5f5f5;
			.right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #8d8d8d;
			}
		}
		.type {
			display: flex;
			margin-top: 60rpx;
			padding: 0 25rpx;
			.item {
				text-align: center;
				margin-right: 80rpx;
				image {
					width: 54rpx;
					height: 66rpx;
				}
			}
		}
	}
	.other {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		margin-top: 24rpx;
		width: 690rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.item {
			display: flex;
			padding: 40rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			.mask {
				width: 44rpx;
				height: 44rpx;
			}
			.content {
				margin-left: 8rpx;
				display: flex;
				width: 100%;
				align-items: center;
				padding-bottom: 31rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
			}
			.active {
				border-bottom: none;
			}
		}
	}
}
</style>
